<template>
  <el-dialog :title="'修改客人类型'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="客人类型" prop="sourceType">
        <el-select v-model="dataForm.sourceType" placeholder="请选择">
          <el-option label="散客" :value="0"></el-option>
          <el-option label="会员" :value="1"></el-option>
          <el-option label="协议单位" :value="2"></el-option>
          <el-option label="中介" :value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择会员" prop="sourceName" v-if="dataForm.sourceType == 1">
        <el-select v-if="dataForm.sourceType == 1" clearable @change="sellerMenberChange" v-model="dataForm.sourceMenberName"
          filterable remote reserve-keyword placeholder="姓名/手机号/身份证号" :remote-method="remoteMethod">
          <el-option v-for="item in sellerMenberOp" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="0" v-if="dataForm.sourceType == 1">
        <div class="customerSourceBar" style="margin-bottom: 0;">
          <div>
            <div class="in_block">
              <label class="fourChar">姓名:</label>
              <label>{{selectSellerMenber.name}}</label>
            </div>
            <div class="in_block">
              <label>电话:</label>
              <label>{{selectSellerMenber.tel}}</label>
            </div>
            <div class="in_block">
              <label class="fourChar">级别:</label>
              <label>{{selectSellerMenber.levelName}}</label>
            </div>
          </div>
          <div>
            <div class="in_block">
              <label>储值:</label>
              <label>{{selectSellerMenber.balance}}</label>
            </div>
            <div class="in_block">
              <label class="threeChar">积分:</label>
              <label>{{selectSellerMenber.score}}</label>
            </div>
            <div class="in_block">
              <label class="threeChar">会员卡号:</label>
              <label>{{selectSellerMenber.cardJustNo}}</label>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="协议单位" prop="sourceName" v-if="dataForm.sourceType == 2">
        <el-select @change="sellerxieyiChange" clearable v-model="dataForm.sourceName" filterable remote reserve-keyword placeholder="名称/编号/手机号"
          :remote-method="sellerxieyiChange">
          <el-option v-for="item in listrestaurants" :key="item.values" :label="item.value" :value="item.values"></el-option>
        </el-select>
      </el-form-item>



      <el-dialog title="选择协议" :visible.sync="showagreement" v-if="showagreement" :append-to-body="true">
        <el-table :data="agreementdataList" border="" v-loading="dataListLoading" style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="80"></el-table-column>
          <el-table-column prop="typeName" header-align="center" align="center" label="协议类型"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="协议主题"></el-table-column>
          <el-table-column prop="no" header-align="center" align="center" label="协议单号"></el-table-column>
          <el-table-column prop="qyTime" header-align="center" align="center" label="签约时间"></el-table-column>
          <el-table-column prop="discount" header-align="center" align="center" label="折扣值"></el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updateAgerembyxieyi(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="agreementpagesum" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </el-dialog>



      <!--      <el-form-item label="备注" prop="remarks">
        <el-input v-model="dataForm.certificatesNumber" placeholder="原因" type="textarea"></el-input>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('Common.Cancel')}}</el-button>
      <el-button type="primary" @click="Req()">{{ $t('Common.Confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import moment from 'moment';
  export default {
    data() {
      var checkAgeSourceName = (rule, value, callback) => {
        if (this.dataForm.sourceType == 2) {
          return callback(new Error('请选择协议单位'));
        }else if(this.dataForm.sourceType == 1){
          return callback(new Error('请选择会员'));
        }
      };
      return {
        agreementdataList: [],
        selectSellerMenber: {},
        sellerMenberOp: [],
        listrestaurants: [],
        restaurants: [],
        showagreement: false,
        dataListLoading: false,
        visible: false,
        loading: false,
        item: {},
        singleEntity: {
          checkinType: 0,
        },
        agreementFrom:{
          agreementId:'',
          limit:1,
          page:1,
        },
        dataForm: {
          agreemCustomerId: '',
          schemeId: '',
          agreemId: '',
          singleId: 0,
          sourceName: '',
          sourceMenberName: '',
          floorRoomId: 0,
          sourceType: 0,
          remarks: '',
        },

        pageIndex: 1,
        pageSize: 10,
        agreementpagesum: 1,
        agreemxyrows: {},
        dataRule: {
          sourceType: [{
            required: true,
            message: '客人类型不能为空',
            trigger: 'blur'
          }],
          // sourceName: [
          // {required: true,message: '不能为空', trigger: 'change' }],
        }
      };
    },
    components: {},
    methods: {
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getagreementByxieyi();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getagreementByxieyi();
      },
      updateAgerembyxieyi(row) {
        this.agreemxyrows = row;
        this.dataForm.agreemCustomerId = row.id;
        this.showagreement = false;
      },
      getInfo() {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/getInfo/${this.dataForm.singleId}`),
          method: 'get',
          params: this.$http.adornParams({
            floorRoomId: this.dataForm.floorRoomId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.singleEntity = data.singleEntity
            this.dataForm.sourceType = data.singleEntity.singleCheckinTypeEntity.sourceType
            this.dataForm.sourceName = data.singleEntity.singleCheckinTypeEntity.sourceName
            if(data.singleEntity.singleCheckinTypeEntity.sourceType == 1){
              this.dataForm.sourceMenberName = data.singleEntity.singleCheckinTypeEntity.sourceName
              this.sellerMenberChange(data.singleEntity.singleCheckinTypeEntity.sourceName)
            }
            this.dataForm.agreemId = data.singleEntity.singleCheckinTypeEntity.agreemId
            this.dataForm.agreemCustomerId = data.singleEntity.singleCheckinTypeEntity.agreemCustomerId
            this.dataForm.schemeId = data.singleEntity.singleCheckinTypeEntity.schemeId
            this.prices = JSON.parse(data.singleEntity.peopleEntity.sign)
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      remoteMethod(query) {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/shareList'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999,
            share:1,
            ruzhuQuery: query
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data);
            this.sellerMenberOp = data.page.records;
          } else {
            this.sellerMenberOp = [];
          }
          this.loading = false;
        });

      },
      getagreementByxieyi() {
        this.agreementFrom.agreementId = this.dataForm.agreemId;
        this.agreementFrom.limit = this.pageSize;
        this.agreementFrom.page = this.pageIndex;
        this.$http({
          url: this.$http.adornUrl('/hotel/agreement-customer/list'),
          method: 'get',
          params: this.agreementFrom
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.agreementdataList = data.page.list;
            this.agreementpagesum = data.page.sum;
            this.showagreement = true;
            this.dataListLoading = false;
          } else {
            this.agreementdataList = [];
            this.agreementpagesum = 0;
          }
          this.dataListLoading = false;
        });
      },
      sellerxieyiChange(value) {
        this.listrestaurants = [];
        console.log(value);
        var restaurants = this.restaurants;
        for (var i = 0; i < this.restaurants.length; i++) {
          var demo = restaurants[i].values;
          if (demo.indexOf(value) != -1) {
            this.dataForm.agreemId = restaurants[i].id
            this.getagreementByxieyi();
            this.listrestaurants.push(restaurants[i]);
          }
        }
      },
      getList() {
        this.$http({
          url: this.$http.adornUrl('/hotel/agreement/shareGetDropDown'),
          method: 'get',
          params: this.$http.adornParams({
            share:3
          })
        }).then(({
          data
        }) => {
          this.restaurants = data.list;
          this.listrestaurants = data.list;
        });
      },
      sellerMenberChange(value) {
        console.log(value);
        var arr = this.sellerMenberOp.filter(item => item.id == value);
        this.selectSellerMenber = arr[0];
      },
      init(singleId, floorRoomId) {
        Object.assign(this.$data, this.$options.data())
        this.visible = true;
        this.dataForm.singleId = singleId;
        this.dataForm.floorRoomId = floorRoomId;
        this.remoteMethod();
        this.getInfo();
        this.getList();
      },
      Req() {
        if(this.dataForm.sourceType == 1){
          if(!this.dataForm.sourceMenberName){
            this.$message.error("请选择要修改的会员")
            return false
          }
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/changeSource`),
              method: 'post',
              data: this.$http.adornData({
                ...this.dataForm,
                singleChinkTypeId: this.singleEntity.singleCheckinTypeEntity.id
              })
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$nextTick(() => {
                  this.$emit('refreClosing');
                  this.$emit('refreshDataList')
                });
                this.visible = false
                this.$message({
                  message: this.$t('Common.OperationSuccessful'),
                  type: 'success',
                  duration: 1500,
                  onClose: () => {

                  }
                });
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })

      }
    }
  };
</script>

<style lang="scss" scoped>
  .in_block {
    display: inline-block;
  }

  .el-form-item.in_block {
    margin-bottom: 8px;
  }

  .customerSourceBar>div>.in_block:nth-of-type(2) {
    width: 37%;
  }

  .customerSourceBar>div>.in_block:first-of-type {
    width: 26%;
  }


  .customerSourceBar {
    padding: 8px 16px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .09);
  }

  @media screen and (min-width: 1441px) {
    .customerSourceBar {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .in_block {
    display: inline-block;
  }
</style>
